<template>
	<div class="popup-box">
		<div class="header">
			<img v-if="!(markerItem.organizationLogo || markerItem.doorHead)" src="@/assets/imgs/default_org.png" class="icon-img" alt="" />
			<PreviewImg v-else class="icon-img" :src="markerItem.organizationLogo || markerItem.doorHead" :zoom-rate="1.2"></PreviewImg>
			<p class="text-title">
				{{ markerItem.name || markerItem.organizationName }}
			</p>
		</div>
		<div class="nav-card">
			<div class="text-box">
				<span class="text-label">统一社会信用代码：</span>
				<span class="text-value">{{ markerItem.creditCode }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">{{ markerItem.typeLabel ? '设施类型' : '机构类型' }} ：</span>
				<span class="text-value">{{ markerItem.organizationTypeLabel || markerItem.typeLabel }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">等级：</span>
				<span class="text-value">{{ markerItem.organizationLevelLabel || markerItem.standardLabel }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">等级评定日期：</span>
				<span class="text-value">{{ markerItem.standardTime || markerItem.organizationEvaluateDate }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">负责人：</span>
				<span class="text-value">{{ markerItem.burdenUserName || markerItem.personName }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">联系方式：</span>
				<span class="text-value">{{ markerItem.burdenUserPhone || markerItem.personTelephone }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">详细地址：</span>
				<span class="text-value">{{ markerItem.address || markerItem.organizationAddress }}</span>
			</div>
			<div class="text-box">
				<span class="text-label">服务范围：</span>
				<span class="text-value">{{ markerItem.serviceScope || markerItem.organizationServiceScope }}</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import PreviewImg from '@/views/aplid/DetailPage/ContentListItem/FileList/PreviewImg/index.vue'
defineProps<{
	markerItem: any
}>()
</script>

<style scoped lang="scss">
.preview-img-box {
	width: 100% !important;
	height: 100% !important;
}
.popup-box {
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	background-color: #fff;
	display: flex;
  align-items: center;
	gap: 10px;
	position: absolute;
	right: 1vw;
	bottom: 1vh;
	padding: 10px;
	> .header {
		position: relative;
    max-width: 200px;
    text-align: center;
		.icon-img {
			width: 100%;
		}

		.text-title {
			font-weight: 700;
			color: #000;
			font-size: 16px;
			text-shadow: 5px 5px 6px #007aff;
			letter-spacing: 4px;
		}
	}

	> .nav-card {
		gap: 4px;
		.text-box {
			max-width: 350px;
			font-size: 14px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #f4f8fb;

			.text-label {
				font-weight: 600;
			}
		}
	}
}
</style>
